<template>
	<view class="detail page bgf5 flex flexJC flexC flexCol fs14 c00 pt10" >
		<view class="  flex  flexC flexB  title">
				
			<image mode="widthFix" src="../../static/img/tq/tq_title.jpg"></image>	
			
		</view>
		
		<view class=" flex  flexC flexB mt20 ">
				
			<image mode="widthFix" :src="tqImg"></image>	
		</view>
		
		<view class=" flex  flexC flexB aliM mt20">
				<view class="flex bold8 ">还差</view>
				<view class="cff0 bold8 fs38 ml10 mr10">{{16-num}}</view>
				<view>个球</view>
		</view>
		
		<view class=" flex  flexC flexB mt20 ">
			<button class="bg57 w200" @click="doOver">我已经归还</button>
		</view>
		
	<!-- 	<view class="bgff mt8 px14 pb20">
			<view class="flex flexC flexB borb py12">
				<text>订单金额</text>
				<text class="">￥{{detail.amount}}</text>
			</view>
		
		</view> -->
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_no: '',
				detail:null,
				share:-1,
				yu:null,
				interval: '',
				status:-1,
				num:0,
				tqImg:'https://img.quexiaqp.com/t_0.png'
				
				
			}
		},
		onLoad(option) {

			this.order_no = option.order_no;
			//this.order_no = "23122017142099995310018494";
		},
		onShow() {
			let that = this;
			this.interval = setInterval(function() {
				console.log("========每隔1秒轮询=========");
				if (that.status == 1) {
					clearInterval(that.interval)
					
					uni.showModal({
						title:"还球提示",
						content:"还球成功，欢迎下次来玩",
						showCancel:false,
					
						complete(res) {
							that.doOver();
						}
						
					})
					return;
				} else {
					that.getDetail();
				}
			}, 2000);
		},
		
		onHide() {
			clearInterval(this.interval)
		},
		onUnload() {
			clearInterval(this.interval)
		
		},
		
		methods: {
			
			doOver(){
				
				let param = {
					order_no: this.order_no,
				};
				let that = this;
				this.$api.tableOverOrder(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						
						uni.navigateBack({delta:1})
					} else {
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
				
			},
			
		
			getDetail(){
				
				let param = {
					order_no: this.order_no,
				};
				let that = this;
				this.$api.tqCheck(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.status = res.data.status;
						that.num = res.data.num;
						if(that.num == 16){
							that.tqImg = "https://img.quexiaqp.com/t_15.png";
						}else{
							that.tqImg = "https://img.quexiaqp.com/t_"+that.num+".png";
							
						}
					} else {
				
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detail{
		background: #F3E1A5;
		height: 100%;
	}
	.w200{
		width: 400rpx;
	}
	.title{
		background: #FFD447;
		border-radius: 10rpx;
		width: 400rpx;
		border: 0rpx;
	}

</style>
